<script setup lang="ts">
import faqImg from '/images/webp/affiliate-program/faq-img.webp';
import myDataImg from '/images/webp/affiliate-program/my-data-img.webp';
import BaseImage from '~/components/BaseImage.vue';

// 添加useI18n
const { t } = useI18n()

definePageMeta({
  layout: 'header-back',
  title:'affiliate_program_faq'
});

// 常见问题列表
const faqItems = ref([
  {
    question: t('affiliate_program_what_is'),
    answer: t('affiliate_program_what_is_answer'),
    expanded: true,
  },
  {
    question: t('affiliate_program_cost'),
    answer: '',
    expanded: false,
  },
  {
    question: t('affiliate_program_no_website'),
    answer: '',
    expanded: false,
  },
  {
    question: t('affiliate_program_earning_potential'),
    answer: '',
    expanded: false,
  },
])

// 切换FAQ展开状态
function toggleFaq(index: number) {
  faqItems.value[index].expanded = !faqItems.value[index].expanded
}
</script>

<template>
  <div class="faq-container">
    <!-- 常见问题说明 -->
    <div class="faq-section">
      <h2 class="section-title">
        {{ t('affiliate_program_faq_explanation') }}
      </h2>

      <div class="faq-list">
        <div v-for="(item, index) in faqItems" :key="index" class="faq-item" @click="toggleFaq(index)">
          <div class="faq-question">
            <span>{{ item.question }}</span>
            <div class="arrow-wrapper">
              <i class="arrow-icon" :class="{ expanded: item.expanded }" />
            </div>
          </div>
          <div v-if="item.expanded" class="faq-answer">
            {{ item.answer }}
          </div>
        </div>
      </div>
    </div>

    <!-- 关系图1 -->
    <div class="relationship-chart">
      <BaseImage class="w-full h-full" :url="myDataImg" />
    </div>

    <!-- 关系图2 -->
    <div class="relationship-chart">
      <BaseImage class="w-full" :url="faqImg" />
    </div>

    <!-- 说明文字部分 -->
    <div class="text-section">
      <!-- 直属团队 -->
      <div class="text-block">
        <h3 class="text-title">
          {{ t('affiliate_program_direct_team') }}
        </h3>
        <p class="text-desc">
          {{ t('affiliate_program_direct_team_desc') }}
        </p>
        <ul class="text-list">
          <li>{{ t('affiliate_program_direct_team_example_1') }}</li>
          <li>{{ t('affiliate_program_direct_team_example_2') }}</li>
          <li>{{ t('affiliate_program_direct_team_example_3') }}</li>
        </ul>
      </div>

      <!-- 自身业绩 -->
      <div class="text-block">
        <h3 class="text-title">
          {{ t('affiliate_program_self_performance') }}
        </h3>
        <p class="text-desc">
          {{ t('affiliate_program_self_performance_desc') }}
        </p>
        <ul class="text-list">
          <li>{{ t('affiliate_program_self_performance_example_1') }}</li>
          <li>{{ t('affiliate_program_self_performance_example_2') }}</li>
          <li>{{ t('affiliate_program_self_performance_example_3') }}</li>
          <li>{{ t('affiliate_program_self_performance_example_4') }}</li>
          <li>{{ t('affiliate_program_self_performance_example_5') }}</li>
          <li>{{ t('affiliate_program_self_performance_example_6') }}</li>
        </ul>
      </div>

      <!-- 其他团队 -->
      <div class="text-block">
        <h3 class="text-title">
          {{ t('affiliate_program_other_team') }}
        </h3>
        <p class="text-desc">
          {{ t('affiliate_program_other_team_desc_1') }}
        </p>
        <p class="text-desc">
          {{ t('affiliate_program_other_team_desc_2') }}
        </p>
        <p class="text-desc">
          {{ t('affiliate_program_other_team_desc_3') }}
        </p>
      </div>

      <!-- 总结说明 -->
      <div class="text-block">
        <h3 class="text-title">
          {{ t('affiliate_program_summary') }}
        </h3>
        <ul class="text-list">
          <li>{{ t('affiliate_program_summary_point_1') }}</li>
          <li>{{ t('affiliate_program_summary_point_2') }}</li>
          <li>{{ t('affiliate_program_summary_point_3') }}</li>
          <li>{{ t('affiliate_program_summary_point_4') }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.faq-container {
  background-color: #1a1d1e;
  color: white;
  min-height: 100vh;
  padding: 16px;
  overflow-y: scroll;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.faq-section {
  background-color: #323738;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.faq-item {
  margin-bottom: 12px;

  .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    padding: 8px 0;

    .arrow-wrapper {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #4a5354;
      border-radius: 4px;
    }

    .arrow-icon {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-right: 2px solid #b3bec1;
      border-bottom: 2px solid #b3bec1;
      transform: rotate(-45deg);
      transition: transform 0.3s;

      &.expanded {
        transform: rotate(45deg);
      }
    }
  }

  .faq-answer {
    padding: 8px 0;
    color: #b3bec1;
    font-size: 12px;
    line-height: 1.5;
  }
}

.relationship-chart {
  background-color: #292d2e;
  border-radius: 8px;
  margin-bottom: 16px;

  .w-full {
    width: 100%;
  }
}

.text-section {
  background-color: #323738;
  border-radius: 8px;
  padding: 16px;

  .text-block {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }

    .text-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .text-desc {
      font-size: 12px;
      color: #849194;
      line-height: 1.5;
      margin-bottom: 8px;
      font-weight: 600;
    }

    .text-list {
      li {
        font-size: 12px;
        color: #849194;
        line-height: 1.5;
        font-weight: 600;
        margin-bottom: 4px;
      }
    }
  }
}
</style>
